/**
* @file  Events
* @author xiao_xie
* @date 2025-03-21
*/

import type { CSSProperties } from 'react';
import React from 'react';
import { CaretRightOutlined } from '@ant-design/icons';
import type { CollapseProps } from 'antd';
import { Collapse, theme } from 'antd';
import EventsItem from './Events/EventsItem';
import useComponentStore from '../../../store';
import NoneSvg from '../../../assets/none.svg'
const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = (panelStyle) => [
  {
    key: '1',
    label: '事件绑定',
    children: <EventsItem />,
    style: panelStyle,
  },
  {
    key: '2',
    label: '组件联动',
    children: <p>2222</p>,
    style: panelStyle,
  },

];



const Events: React.FC = () => {
  const { currentId } = useComponentStore()
  const { token } = theme.useToken();

  const panelStyle: React.CSSProperties = {
    marginBottom: 24,
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: 'none',
  };
  if (!currentId) return <div className='flex flex-col gap-3 items-center text-gray-500 '>
    <img src={NoneSvg} />
    <p>请选择组件</p>
  </div>;
  return <div>

    <Collapse
      bordered={false}
      defaultActiveKey={['1']}
      expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
      style={{ background: token.colorBgContainer }}
      items={getItems(panelStyle)}
    />
  </div>;
};
export default Events;
